<template>
  <div id="line">
    <div
      v-if="reload"
      ref="line"
      :x_data="x_data"
      :y1_data="y1_data"
      :y2_data="y2_data"
      :y3_data="y3_data"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    x_data: Array | Object,
    y1_data: Array | Object,
    y2_data: Array | Object,
    y3_data: Array | Object,
    name1: String,
    name2: String,
    name3: String,
    size: String | Number,
    grid_line: String,
    line_color: String,
    line_style: String,
    font_color: String,
    format_0: String,
    formatter: String | Number
  },
  components: {},
  data() {
    return {
      reload: true
    };
  },
  computed: {
    listen_change() {
      const { x_data, y1_data, y2_data, y3_data } = this;
      return {
        x_data,
        y1_data,
        y2_data,
        y3_data
      };
    }
  },
  watch: {},
  created() {
    this.$watch('listen_change', function (newValue, oldValue) {
      this.draw();
    });
  },
  mounted() {
    this.draw();
  },

  methods: {
    draw() {
      let that = this;
      let my_chart = that.$echarts.init(that.$refs.line);
      let option = {
        tooltip: {
          axisPointer: {
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          },
          trigger: 'axis',
          extraCssText: 'z-index: 9', //设置消息提示框的层级
          formatter: function (params) {
            var result = '';
            if (that.formatter == 1) {
              params.forEach(function (item) {
                if (item.value > 9999 && item.value < 99999999) {
                  item.value = (item.value / 10000).toFixed(1) + 'w';
                } else if (item.value > 99999999) {
                  item.value = (item.value / 100000000).toFixed(1) + '亿';
                } else if (item.value < -99999999) {
                  item.value = (item.value / 100000000).toFixed(1);
                } else if (item.value < -9999) {
                  item.value = (item.value / 10000).toFixed(1) + 'w';
                }
                result +=
                  item.marker +
                  ' ' +
                  item.seriesName +
                  ' : ' +
                  (that.format_0 ? that.format_0 : item.value) +
                  '</br>';
              });
            } else if (that.formatter == 2) {
              params.forEach(function (item) {
                result +=
                  item.marker +
                  ' ' +
                  item.seriesName +
                  ' : ' +
                  (that.format_0 ? that.format_0 : item.value * 100 + '%') +
                  '</br>';
              });
            } else if (that.formatter == 3) {
              params.forEach(function (item, index) {
                if (index == 2) {
                  result +=
                    item.marker +
                    ' ' +
                    item.seriesName +
                    ' : ' +
                    (that.format_0 ? that.format_0 : item.value) +
                    '%</br>';
                } else {
                  if (item.value > 9999) {
                    item.value = (item.value / 10000).toFixed(1) + 'w';
                  } else if (item.value > 99999999) {
                    item.value = (item.value / 100000000).toFixed(1) + '亿';
                  }
                  result +=
                    item.marker +
                    ' ' +
                    item.seriesName +
                    ' : ' +
                    (that.format_0 ? that.format_0 : item.value) +
                    '</br>';
                }
              });
            }
            return params[0].name + '</br>' + result;
          }
        },
        // 新增
        legend: {
          data: [that.name1, that.name2, that.name3],
          itemGap: 20,
          textStyle: {
            color: '#888' // fontSize: 16,
          }
        },
        grid: {
          top: '15%', // 组件离容器上侧的距离,百分比字符串或整型数字
          left: '2%', // 组件离容器左侧的距离,百分比字符串或整型数字
          right: '5%',
          bottom: '3%',
          containLabel: true //grid 区域是否包含坐标轴的刻度标签，
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: that.x_data,
          //设置网格线颜色
          splitLine: {
            show: that.grid_line === 'false' ? false : true,
            lineStyle: {
              color: ['#e5e5e5'],
              width: 1,
              type: 'solid'
            }
          },
          // x轴样式
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: that.line_color ? that.line_color : '#666', //左边线的颜色
              width: '1' //坐标线的宽度
            }
          },
          // x轴字体样式
          axisLabel: {
            show: true,
            margin: 8,
            textStyle: {
              color: that.font_color ? that.font_color : '#555555',
              fontFamily: 'DINAlternate-Bold',
              // fontSize: that.size ? that.size : 12,
              fontSize: 12
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            min: that.line_style ? 100 : null,
            minInterval: 1,
            // 设置网格线颜色
            splitLine: {
              show: that.grid_line === 'false' ? false : true,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              show: true,
              margin: 8,
              textStyle: {
                color: that.font_color ? that.font_color : '#555555',
                fontFamily: 'DINAlternate-Bold',
                fontSize: that.size ? that.size : 12
              },
              formatter: function (value) {
                if (that.formatter == 1 || that.formatter == 3) {
                  return that.format_num(value);
                } else if (that.formatter == 2) {
                  return value * 100 + '%';
                }
              }
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                // color: '#666', //左边线的颜色
                color: that.line_color ? that.line_color : '#666', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            }
          },
          {
            type: 'value',
            min: that.line_style ? 100 : null,
            minInterval: 1,
            //设置网格线颜色
            splitLine: {
              show: that.grid_line === 'false' ? false : true,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              margin: 14,
              show: true,
              textStyle: {
                color: that.font_color ? that.font_color : '#555555',
                fontFamily: 'DINAlternate-Bold',
                fontSize: that.size ? that.size : 12
              },
              formatter: function (value) {
                if (that.formatter == 1 || that.formatter == 3) {
                  return that.format_num(value);
                } else if (that.formatter == 2) {
                  return value * 100 + '%';
                }
              }
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: that.line_color ? that.line_color : '#666', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            }
          }
        ],
        series: [
          {
            name: that.name1,
            data: that.y1_data,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 0, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(253,127,44,0.5)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0.5)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(253,127,44,0.36)', //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: '#fd7f2c',
                lineStyle: {
                  type: that.line_style ? that.line_style : 'solid', //'dotted'虚线 'solid'实线
                  color: '#fd7f2c', //改变折线颜色
                  width: 2
                }
              }
            },
            yAxisIndex: 0
          },
          {
            name: that.name2,
            data: that.y2_data,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 0, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(23,121,255,0.5)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0.5)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(23,121,255,0.36)', //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: '#1779ff',
                lineStyle: {
                  type: that.line_style ? that.line_style : 'solid', //'dotted'虚线 'solid'实线
                  color: '#1779ff', //改变折线颜色
                  width: 2
                }
              }
            },
            yAxisIndex: 1
          },
          {
            name: that.name3,
            data: that.y3_data,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 0, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(6,240,171,0.5)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0.5)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(6,240,171,0.36)', //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: '#06f0ab',
                lineStyle: {
                  type: that.line_style ? that.line_style : 'solid', //'dotted'虚线 'solid'实线
                  color: '#06f0ab', //改变折线颜色
                  width: 3
                }
              }
            },
            yAxisIndex: 1
          }
        ]
      };
      my_chart.setOption(option);

      if (that.line_style) {
        my_chart.setOption({
          graphic: {
            type: 'image',
            bounding: 'raw',
            top: '60%',
            left: '15%',
            style: {
              image:
                '',
              // ''
              width: '110',
              height: '26'
            }
          }
        });
      } else {
        my_chart.setOption({
          graphic: {
            type: 'image',
            bounding: 'raw',
            top: '65%',
            left: '15%',
            style: {
              image:
                '',
              // ''
              width: '110',
              height: '26'
            }
          }
        });
      }
      window.addEventListener('resize', function () {
        my_chart.resize();
      });
      this.$once('hook:beforeDestroy', () => {
        this.$echarts.dispose(my_chart);
      });        
    }
  }
};
</script>
<style lang='less' scoped>
#line {
  div {
    width: 100%;
    height: 100%;
  }
}
</style>